<template>
  <div class="projectLibrary">
    <div class="projectLibrary_left">
      <enterpriseTree ref="enterpriseTree" />
    </div>
    <div class="projectLibrary_right">
      <div class="projectLibrary_right_searchWrap">
        <enterpriseSearch ref="enterpriseSearch" />
      </div>

      <div class="projectLibrary_right_tableContent">
        <!-- 表格展示数据区域 -->
        <div id="xTableWrap" class="main-table-wrap">
          <DynamicTables ref="dynamicTables" :table-data="tableData" :table-header="columnList" :table-loading="tableLoading" />
        </div>
        <!-- 分页 -->
        <div class="commonTable_pagination">
          <div class="commonTable_pagination_right">
            <el-pagination
              background
              :current-page="pageIndex"
              :page-sizes="[50, 100, 150, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="diaLog">
      <enterpriseDialog ref="enterpriseDialog" />
    </div>
    <div class="drawer">
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        size="300px"
        append-to-body
      >
        <div style="padding:10px" class="tabsContainer">
          <div style="margin-bottom:10px;font-size:18px;font-weight:bolder;border-bottom:1px solid #ded4d4;height:40px;line-height:40px">个人中心</div>
          <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
            <el-tab-pane label="预算云数据消息" name="first">
              <div style="color:red;font-weight:bolder;margin-bottom:10px">预算云下行数据与本地新建项目重复数据:</div>
              <div style="text-align:right;margin-bottom:5px">
                <el-checkbox v-model="checked" @change="chooseCheck" /> 全选/反选
              </div>
              <div style="margin-bottom:5px">
                <el-input
                  v-model="filterText"
                  placeholder="输入关键字进行过滤"
                />
              </div>
              <el-tree
                ref="tree"
                :data="budgetCloud"
                show-checkbox
                node-key="guid"
                :props="defaultProps"
                :filter-node-method="filterNode"
              />
              <div>
                <el-button type="primary" @click="replace()">替换</el-button>
                <el-button @click="cancel()">取消</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史中心" name="second">
              <div style="height:calc(83vh);overflow-y: auto;">
                <el-timeline>
                  <el-timeline-item v-for="(item,index) in messageInfo" :key="index" :timestamp="item.editTime" placement="top">
                    <el-card>
                      {{ item.content }}
                      <h4 style="margin-top:10px;color:rgb(64, 158, 255)">时间:{{ item.editTime }}</h4>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import enterpriseTree from './components/enterpriseTree.vue';
import enterpriseDialog from './components/enterpriseDialog.vue';
import enterpriseSearch from './components/enterpriseSearch.vue';
import DynamicTables from './components/DynamicTables.vue';
import commonVariable from '@/utils/commonVariable';
import { getHeader, getData, getAvailableProgram, replaceProgram, programLog } from '@/api/projectLibrary/index';

export default {
  components: {
    enterpriseTree,
    enterpriseSearch,
    enterpriseDialog,
    DynamicTables
  },
  data() {
    return {
      pageSize: 50,
      pageIndex: 0,
      count: 0,
      baseWidthVariable: commonVariable.baseWidthVariable,
      tableData: [],
      headerList: [],
      columnList: [],
      tableLoading: false,
      drawer: false,
      budgetCloud: [],
      activeName: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checked: '',
      filterText: '',
      messageInfo: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    setTimeout(() => {
      this.getHeader();
    }, 500);
    // 显示消息, 只能从首页进去的时候触发
    if (localStorage.getItem('isShowTips') === 'true') {
      localStorage.setItem('isShowTips', 'false');
      this.activeName = 'first';
      getAvailableProgram({

      }).then(res => {
        if (res.data !== '') {
          res.data.map(o => {
            o.label = o.enterpriseCode + ' ' + o.name;
          });
          this.budgetCloud = res.data;
          setTimeout(() => {
            const h = this.$createElement;
            this.$notify({
              title: '提示',
              message: h(
                'div',
                {
                  style: 'justify-content: space-between;'
                },
                [
                  h('div', null, '系统检测到有预算云下行的数据与你本地创建的项目重复,是否覆盖？？？'),
                  h(
                    'span',
                    {
                      style: 'color: #409EFF;cursor: pointer;display:inline-block;width:50%;text-align:center;margin-top:15px',
                      on: {
                        click: this.gotoCover
                      }
                    },
                    '去覆盖'
                  ),
                  h(
                    'span',
                    {
                      style: 'color: red;cursor: pointer;display:inline-block;width:50%;text-align:center',
                      on: {
                        click: this.gotoCancel
                      }
                    },
                    '取消'
                  )
                ]
              ),
              type: 'warning',
              dangerouslyUseHTMLString: true,
              duration: 4000
            });
          }, 1000);
        } else {
          this.budgetCloud = [];
        }
      });
    }
  },
  methods: {
    cancel() {
      this.drawer = false;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    chooseCheck() { // el-tree全选事件
      if (this.checked) { // 全选
        this.$refs.tree.setCheckedNodes(this.budgetCloud);
      } else { // 取消选中
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    replace() {
      const a = this.$refs.tree.getCheckedNodes();
      if (a.length === 0) {
        this.$message({
          message: '系统检测到您还没勾选数据',
          type: 'warning'
        });
      } else {
        // 判断重复
        if ([...new Set(a.map(item => item.name))].length < a.length) {
          this.$message({
            message: '系统检测到您勾选的数据有重复名称的',
            type: 'warning'
          });
        } else {
          const list = [];
          a.map(o => {
            list.push(o);
          });
          replaceProgram({
            list: list
          }).then(res => {
            if (res.success) {
              this.$message({
                message: '替换成功',
                type: 'success'
              });
              this.drawer = false;
            } else {
              this.$message({
                message: '替换失败',
                type: 'warning'
              });
            }
          });
        }
      }
    },
    handleTabClick() {
      this.checked = false;
      this.filterText = '';
      if (this.activeName === 'first') {
        getAvailableProgram({
        }).then(res => {
          if (res.success) {
            res.data.map(o => {
              o.label = o.enterpriseCode + ' ' + o.name;
            });
            this.budgetCloud = res.data;
          } else {
            this.budgetCloud = [];
          }
        });
      } else {
        programLog({
        }).then(res => {
          if (res.success) {
            this.messageInfo = res.data;
          } else {
            this.messageInfo = [];
          }
        });
      }
    },
    gotoCover() {
      this.drawer = true;
      this.$notify.closeAll();
    },
    gotoCancel() {
      this.$notify.closeAll();
    },

    getHeader() {
      getHeader({
        iVouchId: '8010'
      }).then(res => {
        if (res.success) {
          this.headerList = res.data.headerList;
          this.columnList = res.data.columnList.filter(item => item.bHide === 0);
          this.columnList[0].fixed = 'left';
          this.columnList[0].width = '150';
          this.columnList[1].fixed = 'left';
        }
      });
    },
    getData() {
      let filterList = [];
      this.tableLoading = true;
      if (this.$refs.enterpriseTree.enterpriseGuid === 'all') {
        filterList = [];
      } else {
        filterList = [{
          value: this.$refs.enterpriseTree.enterpriseGuid,
          col: 'ENTERPRISEGUID',
          symbol: 'in'
        }];
      }
      this.$refs.enterpriseSearch.filterList.map(o => {
        filterList.push({
          value: o.formType === '0' ? o.value !== '' ? o.value.split(' ')[0] : o.value : o.value,
          col: o.col,
          symbol: o.symbol
        });
      });
      getData({
        columnList: this.columnList,
        filterList: filterList,
        headerList: this.headerList,
        moneyType: '1',
        year: localStorage.getItem('chooseYear'),
        month: '',
        orderBy: '',
        pageType: '1',
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }).then(res => {
        setTimeout(() => {
          this.tableLoading = false;
        }, 500);
        if (res.success) {
          this.tableData = res.data === '' ? [] : res.data;
          this.count = res.total;
        } else {
          this.tableData = [];
          this.count = 0;
        }
      });
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.$refs.dynamicTables.startIndex = (this.pageIndex - 1) * this.pageSize;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.$refs.dynamicTables.startIndex = (this.pageIndex - 1) * this.pageSize;
      this.getData();
    }
  }
};
</script>

<style lang='scss' scoped>
.projectLibrary {
  display: flex;
}
.projectLibrary_left {
  width: 18%;
  padding: 10px;
}
.projectLibrary_right {
  width: 82%;
  padding: 10px 0px;
}
.projectLibrary_right_searchWrap {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.projectLibrary_right_tableContent {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.commonTable-pagination {
  margin-bottom: 10px;
  text-align: right
}
.fontStyle {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  text-align: center
}
.commonTable_pagination{
  display: flex;
  margin-top: 5px
}
.commonTable_pagination_left{
  flex:1
}
.commonTable_pagination_right{
  flex:1;
  text-align: right
}
#xTableWrap /deep/ .vxe-table .vxe-body--column.col--ellipsis, .vxe-table.vxe-editable .vxe-body--column, .vxe-table .vxe-footer--column.col--ellipsis, .vxe-table .vxe-header--column.col--ellipsis {
    height: 30px !important;
}
.tabsContainer /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
    padding: 6px;
    display: none !important;
}
.tabsContainer /deep/ .el-tree {
    position: relative;
    cursor: default;
    background: #fff;
    color: #606266;
    height: calc(65vh) !important;
    overflow-y: auto !important;
}
</style>
